<template>
  <div>
    <Header />
    <home-swiper :swiperList="swiperList"/>
    <Icons :iconList="iconList"/>
    <Recommend :recommendList="recommendList"/>
    <Weekend :weekendList="weekendList"/>
  </div>
</template>

<script>
  import Header from './components/Header'
  import HomeSwiper from './components/HomeSwiper'
  import Icons from './components/Icons'
  import Recommend from './components/Recommend'
  import Weekend from './components/Weedend'

  import axios from 'axios'

  import {mapState} from 'vuex'

  export default {
    name: 'Home',
    components:{
      Header,
      HomeSwiper,
      Icons,
      Recommend,
      Weekend
    },
    data(){
      return{
        lastCity: '',
        swiperList: [],
        iconList: [],
        recommendList: [],
        weekendList: []
      }
    },
    computed: {
      ...mapState(['city'])
    },
    methods: {
      getHomeInfo(){
        axios.get('/api/index.json?city=' + this.city).then( res => {
         let data = res.data;
          console.log(data)
          if(data.ret && data.data){
           this.iconList = data.data.iconList;
           this.recommendList = data.data.recommendList;
           this.weekendList = data.data.weekendList;
           this.swiperList = data.data.swiperList;
         }
        })
      },
    },
    mounted () {
      this.lastCity = this.city;
      this.getHomeInfo()
    },
   activated(){
     if(this.lastCity !== this.city){
       this.lastCity = this.city;
       this.getHomeInfo();
     }
   }
  }
</script>

<style scoped>

</style>
